<template>
  <div class="box">
    <Hand title="我的共享" :left="true" :iconbool="false" @back="fn"></Hand>
    <div class="fx"></div>
    <div class="info">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-yangguangxunzhang" class="use" ></use>
      </svg>
      <ul>
        <li v-for="item in arr">
          <span class="sp1">垃圾回收次数</span>
          <span>20次</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script  setup >


import Hand from '../../components/Hand.vue'
import { useRouter } from 'vue-router'
import { ref } from 'vue';
import '../../assets/font-icon/iconfont'


const router = useRouter()
const arr = ref([1, 2, 3, 4, 5, 6, 7, 8])

function fn() {
  router.back()
}

</script>

<style lang="less" scoped>
.icon {
  width: 24vw;
  height: 24vw;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
  position: absolute;
  left: calc(50% - 12vw);
  top: -12vw;

}
.box {
  width: 100%;
  height: 100vh;
  background: rgba(128, 128, 128, 0.288);
  position: relative;

  .fx {
    width: 100%;
    height: 26.667vw;
    background: url(../../img/首页/u19.png) center center/cover no-repeat;
    // border-radius: 0 0 50vw 50vw;
    margin-top: -1px;
  }

  .info {
    width: 90%;
    height: 76%;
    background: white;
    border-radius: 10px;
    position: absolute;
    top: 18%;
    left: 5%;

    ul {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      // justify-content: center;
      margin-top: 10vw;
      align-items: center;

      li {
        width: 90%;
        border-left: 1vw solid red;
        margin-bottom: 6.667vw;
        display: flex;
        justify-content: space-between;

        .sp1 {
          margin-left: 2vw;
          font-weight: 700;

        }
      }
    }
  }

}
</style>
